<!-- 产品审核 -->
<template>
  <div>
    <BasicTable row-key="id" @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'productName'">
          <div class="flex">
            <div class="flex-shrink-0">
              <Image
              :src="record.imageUrl"
              width="67px"
              height="67px"
              style="object-fit: cover"
              ></Image>
            </div>
            <div class="ml-3">
              <Tooltip :title="record.productName">
                <div class="line-clamp-2 max-h-12 w-[180px]" style="white-space: normal;">
                  {{ record.productName }}
                </div>
              </Tooltip>
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'shopName'">
          <div class="flex items-center">
            <Avatar :src="record.shopLogo" class="flex-shrink-0" />
            <div class="ml-2">{{ record.shopName }}</div>
          </div>
        </template>
        <template v-else-if="column.key === 'userName'">
          <div class="flex items-center">
            <Avatar :src="record.userAvatar" class="flex-shrink-0" />
            <div class="ml-2">
              <span>{{ record.userName }}</span>
              <span>{{ record.userPhone }}</span>
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'minPrice'">
          <Price
            :min-price="record.minPrice"
            :max-price="record.productMinPrice"
            :price-show-type="record.priceShowType"
          />
        </template>
        <template v-else-if="column.key === 'memberName'">
          <div v-if="record.memberName" class="flex items-center">
            <Avatar :src="record.memberLogo" class="flex-shrink-0" />
            <div class="ml-2">
              <span>{{ record.memberName }}</span>
              <span>{{ record.levelName }}</span>
            </div>
          </div>
          <div v-else class="flex items-center">
            <Avatar :src="record.shopLogo" class="flex-shrink-0" />
            <div class="ml-2">{{ record.shopName }}</div>
          </div>
        </template>
        <template v-else-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '详情',
                onClick: () => openDetailModal(1, record),
              },
              record.reviewStatus == ReviewStatus.Pending
                ? {
                    label: '立即审核',
                    onClick: () => openDetailModal(2, record),
                  }
                : {},
            ]"
          />
        </template>
        <template v-if="column.key === 'logisticsMode'">
          <span>{{
            dictionary.logisticsMode.find((v) => v.dictValue === record.logisticsMode)?.dictLabel
          }}</span>
        </template>
      </template>
    </BasicTable>

    <ProductExamineDetail isLeague @register="registerDetail" @reload="reload" />
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, unref } from 'vue';
  import { BasicTable, useTable, TableAction, FormSchema } from '@/components/Table';
  import Dictionary from '@/utils/dictionary';
  import { Image, Avatar, Tooltip } from 'ant-design-vue';
  import { useModal } from '@/components/Modal';
  import { formatMoney } from '@/utils/number';
  import dictionary from '@/utils/dictionary/localDicts';
  import { getProductAuditList } from '@/api/hby/resourceLeague/index';
  import { ProductReviewItem } from '@/api/hby/resourceLeague/type';
  import ProductExamineDetail from "@/views/hby/productManage/ProductExamine/ProductExamineDetail.vue"
  import { ReviewStatus } from '@/enums/productManage';
  import { productCategoryList } from '@/api/hby/categoryManagement';
  import { isArray } from '@/utils/is';
  import Price from '@/components/Price/index.vue';
  const dicts = Dictionary.getLocalMulti([
    'productType',
    'productReviewStatus'
  ]);

  const tableSchemas = reactive<FormSchema[]>([
    {
      field: `keyWord`,
      label: `搜索产品`,
      component: 'Input',
      componentProps: {
        placeholder: '输入商品名称/组织名称/发布者名称',
      },
      colProps: {
        span: 8,
      },
    },

    {
      field: `productCategoryId`,
      label: `产品分类`,
      component: 'ApiCascader',
      componentProps: {
        api: productCategoryList,
        isLoadData: false,
        initFetchParams: { size: 999 },
        labelField: 'name',
        valueField: 'id',
        isLeaf: (record) => {
          return !record.children
        },
        showLastLabel: true,
        showSearch: true,
        filterOption: (input: string, option: any) => {
          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
      },
      colProps: {
        span: 6,
      },
    },
    {
      field: `productType`,
      label: `产品类型`,
      component: 'Select',
      componentProps: {
        fieldNames: { label: 'dictLabel', value: 'dictValue' },
        options: dicts.productType,
      },
      colProps: {
        span: 4,
      },
    },
    {
      field: `reviewStatus`,
      label: `审核状态`,
      component: 'Select',
      componentProps: {
        fieldNames: { label: 'dictLabel', value: 'dictValue' },
        options: dicts.productReviewStatus,
      },
      colProps: {
        span: 4,
      },
    }
  ]);

  const [registerTable, { reload }] = useTable({
    api: (params: any) => {
      if(isArray(params.productCategoryId)){
        params.productCategoryId = params.productCategoryId[params.productCategoryId.length - 1];
      }
      return getProductAuditList(params);
    },
    columns: [
      {
        title: '产品信息',
        dataIndex: 'productName',
        width: 272,
        align: 'center',
      },
      {
        title: '价格',
        dataIndex: 'minPrice',
        width: 150,
        align: 'center',
      },
      {
        title: '产品类型',
        dataIndex: 'productType',
        width: 100,
        align: 'center',
      },
      {
        title: '产品类目',
        dataIndex: 'productCategoryName',
        width: 100,
        align: 'center',
      },
      {
        title: '库存',
        dataIndex: 'totalStockNum',
        width: 150,
        align: 'center',
      },
      {
        title: '产品来源',
        dataIndex: 'shopName',
        width: 240,
        align: 'center',
      },
      {
        title: '发布者',
        dataIndex: 'userName',
        width: 214,
        align: 'center',
      },
      {
        title: '申请时间',
        dataIndex: 'createTime',
        width: 200,
        align: 'center',
      },
      {
        title: '审核状态',
        dataIndex: 'reviewStatusText',
        width: 200,
        align: 'center',
      },
      {
        title: '审核时间',
        dataIndex: 'reviewTime',
        width: 200,
        align: 'center',
      }
    ],
    useSearchForm: true,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    formConfig: {
      labelWidth: 100,
      schemas: tableSchemas as unknown as FormSchema[],
    },
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
    },
    afterFetch: (data: ProductReviewItem[]) => {
      return data.map((item) => {
        return {
          ...item,
          productType: dicts.productType.find((v) => v.dictValue == item.productType)?.dictLabel,
          reviewStatusText: dicts.productReviewStatus.find((v) => v.dictValue === item.reviewStatus)?.dictLabel,
        };
      });
    },
  });

  // 详情弹窗
  const [registerDetail, { openModal: openDetail }] = useModal();
  function openDetailModal(type: number, row: ProductReviewItem) {
    openDetail(true, { type, row });
  }

</script>

<style lang="less" scoped></style>
